<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.expectIndustry"
        placeholder="期望行业"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.expectCity"
        placeholder="期望城市"
        style="width: 200px;margin-left: 10px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.resIdentity"
        class="filter-item"
        style="width: 150px;margin-left: 10px"
        placeholder="身份"
      >
        <el-option v-for="item in resIdentityOperations" :key="item.value" :label="item.text" :value="item.text" />
      </el-select>
      <el-input
        v-model="listQuery.expectSalaryLower"
        placeholder="薪资下限"
        style="width: 100px;margin-left: 10px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      -
      <el-input
        v-model="listQuery.expectSalaryUpper"
        placeholder="薪资上限"
        style="width: 100px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      k
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        size="medium"
        type="primary"
        icon="el-icon-refresh"
        @click="reset"
      >
        重置
      </el-button>
    </div>

    <div class="table-item">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ listQuery.limit * (listQuery.page - 1) + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="150" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份" width="150" align="center">
          <template slot-scope="{row}">
            <span>{{ row.resIdentity | dataFilter(resIdentityOperations) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150" align="center">
          <template slot-scope="{row}">
            <span>{{ row.resState | dataFilter(resStateOperations) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期望行业" align="center">
          <template slot-scope="{row}">
            <span>{{ row.expectIndustry }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期望工作" align="center">
          <template slot-scope="{row}">
            <span>{{ row.expectRecruitment }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期望城市" align="center">
          <template slot-scope="{row}">
            <span>{{ row.expectCity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期望薪资" align="center">
          <template slot-scope="{row}">
            <span>{{ row.expectSalary }}k</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" plain @click="handleView(row.id)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { resIdentityOperations, resStateOperations } from '../../utils/constants'
import Pagination from '../../components/Pagination' // secondary package based on el-pagination
import {
  fetchResumeList, employerViewResume
} from '@/api/resume'

export default {
  name: 'Resume',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        expectIndustry: undefined,
        expectCity: undefined,
        expectSalaryLower: undefined,
        expectSalaryUpper: undefined,
        resIdentity: undefined
      },
      resIdentityOperations: resIdentityOperations,
      resStateOperations: resStateOperations
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      fetchResumeList(this.listQuery).then(response => {
        // console.log(response.data)
        this.list = response.data.resumeList
        this.total = response.data.count
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    reset() {
      this.listQuery.expectIndustry = undefined
      this.listQuery.expectCity = undefined
      this.listQuery.expectSalaryLower = undefined
      this.listQuery.expectSalaryUpper = undefined
      this.listQuery.resIdentity = undefined
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.getList()
    },
    handleView(id) {
      employerViewResume({ resumeId: id }).then(
        (response) => {
          this.$router.push({ path: '/resume/view', query: { id: id }})
        },
        (error) => {
          this.$message.error(error.message)
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-item {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .filter-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
